webpack初学习

用npm安装webpack 首先要安装node

--save-dev本地安装 开发依赖 因为上线后不需要

1、安装webpack 1)npm init -y 初始化文件夹 2)本地安装 npm install webpack --save-dev 3)在根路径./ 下创建一个webpack.config.js文件夹 并用node的commenJS形式导出 module.exports={} 里边需要配置 入口文件 entry:'xxx.js' output:{ 导出的文件名和路径（自动创建） filename:'bundle2222.js', path: path.resolve("./dist"), }, …… 2、安装webpack 服务 npm install webpack-dev-server --save-dev 安装完成后需要package.json中 配置 script-》"dev": "webpack-dev-server" 在命令行中 npm run dev 就可以启动服务 -这里内置了服务 可以帮我们启动一个端口号，当代码更新时 可以自动打包（内存中打包），代码有 变化就重新执行

3、需要编译es6 es7代码 需要安装babel npm install babel-core --save-dev//核心 npm install babel-loader --save-dev //翻译官 npm install babel-preset-es2015 --save-dev//让翻译官babel-loader拥有解析es6语法的功能 npm install babel-preset-stage-0 --save-dev //代表最大范围 所有的版本应该是 不需要制定安装版本 // 安装完成后需要在webpack.config.js中module中配置 {test:/.js$/,use:'babel-loader',exclude:/node_modules/},

##webpack 解析css 将css当成模块 需要安装css loader 4、 将css解析成模块 将解析的内容插入到style标签内（style-loader） npm install css-loader npm install style-loader 在入口js中 main.js文件引入 import "./index.css"; import "./style.less" // 安装完成后需要在webpack.config.js中module中配置 {test:/.css/,use:["style-loader","css-loader","less-loader"]},

解析图片 需要安装 loader

npm install file-loader url-loader --save-dev
// 安装完成后需要在webpack.config.js中module中配置
  {test:/\.(jpg|png|gif)$/,use:"url-loader?limit=8192"},
  {test:/\.(eot|svg|woff|woff2)$/,use:"url-loader"},
复制代码

安装html插件

npm install html-webpack-plugin --save-dev

• 插件的作用 是以我们自己的html为模板 将打包后的结果，自己引入到html中产出到dist目录下,不需要手动引入js 安装完成后需要在webpack.config.js中plugins中配置 plugins:[ new HtmlWebpackPlugin({ template:"./src/index.html",//使用的html模板 自己写的一个html文件 // filename:"login.html",//产出的文件名字 默认是index.html }), ], let HtmlWebpackPlugin=require("html-webpack-plugin");// 插件是需要引入的 在入口文件main.js中引入

、、、、、、、、、、 注明： Vue Loader v15现在需要一个附带的webpack插件才能正常工作：

// webpack.config.js const VueLoaderPlugin = require（ ' vue-loader / lib / plugin '）

module.exports = { // ... plugins： [ new VueLoaderPlugin（） ] }

转载于:https://juejin.im/post/5af58f68f265da0b886d7b49