webpack使用

1、基本文件目录

2、初始化

npm init -y

3、安装jquery

npm install jquery -s

-s是写入dependencies，即生产环境

4、在main.js中导入jquery,并编写jquery代码

import $ from 'jquery'

$(function (){
    $('li:odd').css('backgroundColor','blue');
    $('li:even').css('backgroundColor','yellow');
})

5、用webpack打包

webpack ./src/main.js ./dist/bundle.js

                源文件路径   目标文件路径

6、改写webpack.config.js文件，简化打包步骤

const path = require('path');

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

此时webpack ./src/main.js ./dist/bundle.js命令被简化为webpack

7、使用webpack-dev-server工具，实现自动打包编译的功能

运行  npm i webpack-dev-server -D 将工具安装到本地，即开发依赖

在package.json中的scripts中添加，第二行是我们添加的内容，后面的参数是--open自动打开浏览器--port 3000配置端口（默认是8080）--contentBase src 打开服务器后要展示的页面路径

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 3000 --contentBase src"
  }

在本地安装webpack      npm i webpack@4.0.0 -D

在本地安装webpack-cli      npm i webpack-cli -D

npm run dev 运行

8、引入bundle.js

所有的文件都被打包进bundle.js，所以需要在页面引入bundle.js

在使用webpack-dev-server之前，引入路径为配置文件中的/dist/bundle.js

在使用npm run dev后，引入路径为根目录下的/bundle.jswebpack-dev-server帮我们打包生成的bundle.js并没有存放到实际的物理磁盘中，而是托管到了电脑的内存中，所以我们在项目的根目录中找不到这个打包好的bundle.js.

此时并没有大功告成，如果直接右键openInBrowser会发现控制台虽然编译成功了但是网页。并没有刷新，那是因为webpack-dev-server把我们的项目托管到一个服务器了

可以看到服务器地址是http://localhost:8080/  而输出文件在根目录下，

ctrl + 点击地址就能在浏览器打开项目，这时候更新项目后，网页就能实时更新了

9、html-webpack-plugin插件

他是用来为html引入外部资源文件的，比如script  动态添加每次编译后的hash（给文件名添加hash字符，这样每次编译后生成的文件都是不同的，就不会引用缓存文件了），防止引用缓存的外部文件

npm i install html-webpack-plugin -D

然后在webpack.config.js中进行配置

const htmlWebpackPlugin = path.require('html-webpack-plugin');
module.exports = {
    plugins : [
        new htmlWebpackPlugin({
            template : path.join('__dirname, './src/index.html/),//指定模板页面，将来会跟据制定的路径去生成内存中的页面
            filename : 'index.html'  //生成页面的名称
        })
    ]
}

10、引入.css .less .csss文件

需要用到css-loader   styte-loader  less-loader  sass-loader  node-sass这几个插件

这即个插件用来自动引入.css   .less   .scss文件,less-loader 依赖于less,   sass-loader依赖于node-sass

npm i css-loader style-loader less-loader less sass-loader node-sass -D

下载后在webpack.config.js中进行配置

      module : {
          rules : [//用于匹配所有第三方模块，加载器
              {test : /\.css$/, use : ['style-loader', 'css-loader']},//从右到左调用,.css的匹配规则
              {test : /\.less$/, use : ['style-loader', 'css-loader', 'less-loader']},//.less的匹配规则
              {test : /\.scss$/, use : ['style-loader', 'css-loader', 'sass-loader']}//.sass的匹配规则
          ]
      }

在main.js中导入

import './css/index.css'
import './css/index.less'
import './css/index.scss'

11、在样式文件中引入url

默认情况下webpack无法引入css中url，需要通过url-loader来实现，url-loader依赖于file-loader

npm i url-loader file-loader -D

在webpack.config.js中进行配置

module : {
    rules : [
         {test : /\.(gif|png|jpg)$/, use : 'url-loader'}
            ]
    }

12、使webpack完全支持ES6

由于webpack只支持部分ES6语法，所以还要通过插件来解决这个问题（插件按到吐???）

babel-core、babel-loader、babel-plugin-transform-runtime、babel-preset-env、babel-preset-stage-0

 

注意版本兼容，是个坑?

在根目录新建一个文件   .babelrc 在 .babelrc中配置

{
    "presets" : ["env","stage-0"],
    "plugins" :["transform-runtime"]
}

配置webpack.config.js

      module : {
          rules : [
              {test : /\.js$/, use : 'babel-loader', exclude : /node_modules/}//不转换node_modules中的js文件,只转换自己写的js
          ]
      }

 

https://www.cnblogs.com/Richard-Tang/p/9875607.html

 

 

 

 

 

注意：package.json中不允许有注释

 

webpack-dev-server的一些配置https://blog.csdn.net/franktaoge/article/details/80083317

html-webpack-plugin的一个配置https://segmentfault.com/a/1190000013883242?utm_source=tag-newest