2018年1月 Webpack笔记
1、学习途径:慕课网 《webpack深入与实战》
2、环境
MAC系统、终端shell、nodejs
切换到项目夹中
npm init
根据提示输入项目名称、描述、入口文件等。
新建hello.js文件
function hello(str){ alert(str); } hello('1234');
用Webpack打包文件
webpack hello.js hello.bundle.js
将hello.js 编译成浏览可以兼容的JS代码
const path = require('path'); // nodejs 引入模块 NODJS自带 var HtmlWebpackPlugin = require('html-webpack-plugin'); //npm install html-webpack-plugin --save-dev 手动安装 module.exports = { entry: './src/app.js', //引入文件 output:{ path: path.resolve(__dirname,'./dist'), //输出目录 filename: "js/[name]_bundle.js" //输出文件 }, module: { //模块,处理项目中不同信息的模块 rules:[ //匹配请求规则数组 { test: /\.js$/, //正则请求类型 loader:'babel-loader', //处理模型 include: path.resolve(__dirname,'src'), //处理目录 exclude: path.resolve(__dirname,'node_modules'), //排除目录 query:{ presets:['env'] } }, { test: /\.(css|less|sass)$/, use:[ 'style-loader', 'css-loader', 'less-loader', 'sass-loader', { loader: 'postcss-loader', //格式化CSS 加兼容前缀 options:{ plugins: [require('postcss-import'),require('autoprefixer')], browser:['last 5 versions'] } } ] }, { test: /\.(html)$/, use: { loader: 'html-loader' } }, { test: /\.tpl$/, loader:'ejs-loader' }, { test: /\.(png|jpg|gif)$/i, loaders: [ 'url-loader?limit=10000&name=assets/[name]-[hash:5].[ext]', 'image-webpack-loader' ] } ] }, plugins: [ //插件 new HtmlWebpackPlugin({ //HTML模块引擎 filename: 'index.html', //输出文件 template: 'index.html', //模块文件 inject: 'body', //JS插入位置 title: 'webpack is a' //模块数据 }) ] }