赞
踩
1.项目初始化 npm init -y
2.下载配置文件 npm i -D webpack webpack-cli typescript ts-loader html-webpack-plugin webpack-dev-server clean-webpack-plugin @babel/core @babel/preset-env babel-loader core-js
3.创建一个webpack.config.js
- //引入
- const path = require('path');
- //引入html插件
- const HTMLWEBPACKPLUGIN = require('html-webpack-plugin');
- const {CleanWebpackPlugin} = require('clean-webpack-plugin')
- //webpack中所有的配置信息
- module.exports = {
- //入口文件
- entry:'./src/index.ts',
- //指定打包文件所在目录
- output:{
- //指定打包文件的目录
- path:path.resolve(__dirname,'dist'),
- //打包后文件的文件
- filename:"bundle.js"
- },
- //webpack打包时要使用的模块
- module:{
- //指定加载规则
- rules:[
-
- {
- //test 指定的是规则生效的文件
- test:/\.ts$/,
- //要使用的loader
- use:[
- //配置babel
- {
- //指定加载器
- loader:'babel-loader',
-
- },
- 'ts-loader'
- ],
- //要排除的文件
- exclude:/node-modules/
- },
- {
- test:/\.css$/,
- use:[
- 'style-loader',
-
- {
- loader: "postcss-loader",
- options: {
- postcssOptions:{
- plugins:[
- 'postcss-preset-ebv',
- {
- browsers:'last 2 versions'
- }
- ]
- }
- }
- },
- 'css-loader'
- ]
- }
- ]
- },
- //配置webpack插件
- plugins:[
- new CleanWebpackPlugin(),//清空dist 文件
- new HTMLWEBPACKPLUGIN(),
-
- ],
- //用来设置引用模块
- resolve:{
- extensions:['.ts','.js']
- }
-
- }
4.tsconfig.json
- "compilerOptions": {
-
- "target": "ES6",
- "module": "es6",//模块化的规范
- "strict": true,//开启所有严格模式检查
-
-
- }
5.package.json 在scripts 中添加build:webpack
- scripts:{
-
- "build":"webpack",
- "start":"webpack serve --open chrome.exe"
-
- }
6.执行编译 npm run build
然后执行npm i -D css-loader style-loader 在webpack.config.js 中配置一下
然后在执行 npm i -D postcss postcss-loader postcss-preset-env //(css样式兼容)
然后在index.ts文件中引入index.css
然后执行命令 npm run bulid
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。