Webpack 基础安装配置

1.nrm

1. 提供常用的npm镜像地址
2. npm i nrm -g //全局安装nrm包 i=install
3. nrm ls //查看当前所有可用的镜像源地址
4. nrm use taobao //切换不同的镜像

2.webpack

1. 定义：项目构建工具，基于Node.js开发， 主要目标是将 css文件JavaScript 文件打包在一起,打包后的文件用于在浏览器中使用
2. npm i webpack -g 全局安装
3. npm i cnpm 淘宝镜像 npm install cnpm -D
4. npm i -S //-save 写入dependencies 生产环境依赖
5. npm i -D //-save-dev 写入devDependencies 开发环境依赖
6. npm uninstall webpack -g // 取消安装

3.webpack使用

1. npm init -y //初始化项目
2. 新建webpack.config.js // 与package.json同一级目录

const path = require('path')
module.exports = { 
  mode:'development',
  entry : path.join(__dirname,'./src/js/main.js'),
  output : {
    path: path.join(__dirname,'./dist'),
    filename:'bundle.js'
}

终端中输入webpack进行打包
3. webpack-dev-server 自动打包编译

• npm i webpack-dev-server -D
• 在package.json的"script"加入"dev":“webpack-dev-server”

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot", 
    //开启npm run dev 通过localhost:3000端口访问
  }

4. html-webpack-plugin

• 作用：当使用 webpack 打包时，创建一个 html 文件，并把 webpack 打包后的静态文件自动插入到这个 html 文件当中。
• npm install html-webpack-plugin --save-dev

  plugins : [
  //创建了一个虚拟index.html在内存里，不再需要手动处理bundle.js的引用路径
  	new htmlWebpackPlugin({ //创建一个在内存中生成HTML页面的插件
  		template: path.join(__dirname,'./src/index.html'),
  		filename:'index.html'
  	}),
    new VueLoaderPlugin()
  ]

5. loader

• 作用:loader 让 webpack 能够去处理那些非 JavaScript 文件
• npm install style-loader -D
• npm install css-loader -D //用哪个安装哪个
• npm install sass-loader node-sass webpack --save-dev

  module : {
  	rules: [
  	{test : /\.css$/,loader:'style-loader!css-loader'},
  	{test : /\.less$/,loader:'style-loader!css-loader'!'less-loader'}, 
  	 {test : /\.scss$/,loader:'style-loader!css-loader',!sass-loader'},  //感叹号为分隔符
  	// {test : /\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=1024&name=[name].[ext]'} //图片名称加密
  	{ test: /\.(jpg|png|gif|bmp|jpeg)$/,loader:'url-loader',options:{limit:1000,name:'[hash:8]-[name].[ext]'}},//图片
  	{ test: /\.(ttf|eot|svg|woff|woff2)$/,loader:'url-loader'},//字体
    { test: /\.vue$/,use : 'vue-loader'} 
  	]
  }

6. 解析JS

• npm install babel-loader babel-core babel-preset-env webpack -D

 rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            options: {
                presets: ['env']
            }
        }

7. 最重要的部分
   每个插件的版本号很重要，稍微不一样就不兼容就崩溃，不要问我怎么知道的o(╥﹏╥)o
   web.config.js配置

var path = require('path')
var htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
	entry: path.join(__dirname, './src/js/main.js'),
	output: {
		path:path.join(__dirname,'./dist'),
		filename: "bundle.js"
	},
	module: {
		rules: [
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
      { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
      { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader' },
	  { test: /\.scss$/,loader:'style-loader!css-loader!sass-loader'}
		]
	},
	plugins:[
		new htmlWebpackPlugin({
			template: path.join(__dirname,'./src/index.html'),
			filename: 'index.html'
		})
	]
}

package.json

{
  "name": "jd_mobile",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "css-loader": "^0.28.7",
    "html-webpack-plugin": "^2.30.1",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.23.1",
    "url-loader": "^2.0.1",
    "webpack": "^3.8.1",
    "webpack-cli": "^3.3.5",
    "webpack-dev-server": "^2.9.4",
    "node-sass": "^4.6.0"
  },
  "dependencies": {
    "jquery": "^3.3.1"
  }
}

8. 下次更新引入vue