配置webpack4_html-js-css

概述1、npm init 　　生成package.json文件 2、npm install webpack webpack-cil --save-dev 　　安装webpack和webpack-cli 3、新建一个src文件夹，里面创建index.js文件 console.log(123); 　　webpack会自动查找src下的index.js文件，将它打包到dist文件夹里，默认生成 1、npm init 　　生成package.Json文件 2、npm install webpack webpack-cil --save-dev 　　安装webpack和webpack-cli 3、新建一个src文件夹，里面创建index.Js文件

console.log(123);

　　webpack会自动查找src下的index.Js文件，将它打包到dist文件夹里，默认生成main.Js，main.Js就是打包后的文件 4、修改package.Json

1 2 3 4 5 "scripts" @H_502_54@: { "test" @H_502_54@: "echo \"Error: no test specifIEd\" && exit 1" @H_502_54@, "dev" @H_502_54@: "webpack --mode development" @H_502_54@, // （开发模式） "build" @H_502_54@: "webpack --mode production" // （生产模式） @H_502_54@},

　　开发模式生成的文件不压缩

　　生产模式生成的文件压缩

5、运行npm run dev和npm run build 　　此时，根目录下就会多出dist文件夹，里面有main.Js文件，可以分别运行这两个命令，看一下生成的main.Js文件的区别 6、以上这些都是默认的，当然这些可以自己配置　　新建webpack.config.Js文件

1 2 3 4 5 6 7 8 9 @H_502_54@const path = require( "path" @H_502_54@) @H_502_54@module.exports = { @H_502_54@entry: "./src/index.Js" @H_502_54@, // 入口 @H_502_54@output: { // 出口 @H_502_54@filename: "bundle.Js" @H_502_54@, // 生成打包文件的名字 @H_502_54@path: path.join(__dirname, "dist" @H_502_54@) // 打包文件的路径，__dirname指当前根目录 @H_502_54@} @H_502_54@}

　　此时运行npm run dev，在dist文件夹下就能看到打包生成的bundle.Js文件

7、以上是单文件入口，那如果是多文件入口呐　　只需修改webpack.config.Js文件

1 2 3 4 5 6 7 8 9 10 @H_502_54@module.exports = { @H_502_54@entry: { // 多文件入口 @H_502_54@index: "./src/index.Js" @H_502_54@, @H_502_54@test: "./src/test.Js" @H_502_54@}, @H_502_54@output: { // 出口 @H_502_54@filename: "[name].bundle.Js" @H_502_54@, // 生成打包文件的名字 ==>注意这里，因为是多文件入口，所有需要[name]来区分文件 @H_502_54@path: path.join(__dirname, "dist" @H_502_54@) // 打包文件的路径，__dirname指当前根目录 @H_502_54@} @H_502_54@}

　　运行npm run dev

　　就能看到打包后的index.bundle.Js和test.bundle.Js文件，　　entry也可以写成数组的形式　　　　entry: ["./src/index.Js","./src/test.Js"], 　　这个方式和对象形式结果是一样的。　　将代码恢复，删除掉刚刚生成的index.bundle.Js和test.bundle.Js文件，以及mian.Js文件 8、设置webpack-dev-server 　　安装 npm install webpack-dev-server --save-dev 　　在webpack.config.Js进行配置

1 2 3 4 5 6 7 8 9 10 @H_502_54@devServer: { // 设置基本目录结构 @H_502_54@contentBase: path.join(__dirname, "dist" @H_502_54@), // 服务器的ip地址，也可以使用localhost @H_502_54@host: "localhost" @H_502_54@, // 服务端压缩是否开启 @H_502_54@compress: true @H_502_54@, // 配置服务端口号 @H_502_54@port: 8080 @H_502_54@}

　　修改package.Json内容为

1 2 3 4 5 6 "scripts" @H_502_54@: { "test" @H_502_54@: "echo \"Error: no test specifIEd\" && exit 1" @H_502_54@, "serve" @H_502_54@: "webpack-dev-server --mode development" @H_502_54@, "dev" @H_502_54@: "webpack --mode development" @H_502_54@, "build" @H_502_54@: "webpack --mode production" @H_502_54@},

　　运行npm run serve

　　成功 9、打包HTML文件　　安装HTML-webpack-plugin，它能够帮我们插入script及link标签　　npm install HTML-webpack-plugin --save-dev 　　src下新建index.HTML文件

1 2 3 4 5 6 7 8 9 10 11 12 13 14 @H_502_54@<!DOCTYPE HTML> @H_502_54@<HTML lang= "en" @H_502_54@> @H_502_54@<head> @H_502_54@<Meta charset= "UTF-8" @H_502_54@> @H_502_54@<Meta name= "vIEwport" @H_502_54@content= "wIDth=device-wIDth,initial-scale=1.0" @H_502_54@> @H_502_54@<Meta http-equiv= "X-UA-Compatible" @H_502_54@content= "IE=edge" @H_502_54@> @H_502_54@<Title>document</Title> @H_502_54@</head> @H_502_54@<body> @H_502_54@<div ID= "main" @H_502_54@> @H_502_54@hello @H_502_54@</div> @H_502_54@</body> @H_502_54@</HTML>

　　在webpack.config.Js中进行配置

　　开头引入插件

1	@H_502_54@const HTMLWebpackPlugin = require( `‘HTML-webpack-plugin‘` @H_502_54@)

　　在plugins配置

1 2 3 4 5 6 7 8 @H_502_54@plugins: [ new @H_502_54@HTMLWebpackPlugin({ @H_502_54@filename: ‘index.HTML‘ @H_502_54@, @H_502_54@template: ‘./src/inde.HTML‘ @H_502_54@, // chunks: [‘index‘], // 多入口时需要用到 @H_502_54@hash: true // 插入的文件后面加一段随机数 @H_502_54@}) @H_502_54@],

　　运行npm run serve，浏览器中打开localhost:8080

　　成功，此时dist文件夹下也有了index.HTML文件 10、打包CSS文件　　在src下新建main.CSS文件

1 2 3 4 5 6 7 #main{ @H_502_54@height: 100px; @H_502_54@wIDth: 100px; @H_502_54@Font-size: 40px; @H_502_54@color: #FF6347; @H_502_54@ @H_502_54@}

　　需要安装css-loader，style-loader

　　npm install css-loader style-loader --save-dev 　　webpack.config.Js中配置

1 2 3 4 5 6 7 8 9 @H_502_54@module: { @H_502_54@rules:[ // CSS loader @H_502_54@{ @H_502_54@test: /\.CSS$/, @H_502_54@use: [ "style-loader" @H_502_54@, "css-loader" @H_502_54@] // 这里顺序不能颠倒 @H_502_54@} @H_502_54@] @H_502_54@},

　　在入口文件index.Js中引入mian.CSS文件　　import main from ‘./main.CSS‘ 　　// require(‘./main.CSS‘) 　　这两种引入方式都可以　　npm run serve

　　效果有了 11、使用style-loader会将样式内嵌到HTML中，但是我们不希望这样，我们想在HTML中通过link标签的形式引入。　　使用extract-text-webpack-plugin插件分离CSS 　　安装：　　　　npm install extract-text-webpack-plugin --save-dev 　　webpack.config.dev中配置

1 2 3 new @H_502_54@ExtractTextPlugin({ @H_502_54@filename: "index.CSS" @H_502_54@, @H_502_54@})

1 2 3 4 5 6 7 8 9 10 11 @H_502_54@rules:[ // CSS loader @H_502_54@{ @H_502_54@test: /\.CSS$/, @H_502_54@use: ExtractTextPlugin.extract({ @H_502_54@fallback: "style-loader" @H_502_54@, @H_502_54@use: "css-loader" @H_502_54@}) @H_502_54@} @H_502_54@]

然后npm run build 打包，结果报错

　　这是因为extract-text-webpack-plugin目前版本并不支持webpack4 　　所以安装最新版本　　　　npm install [email protected] --save-dev 　　再次打包　　npm run build，成功，此时dist文件夹里就有了index.CSS文件

　　此时dist下的HTML文件中就是通过link的方式引入CSS的

　　如果在CSS中引入图片打包呐 12、CSS中引入图片　　在src/index.HTML新加一个div，class为bg。在src/main.CSS中添加

1 2 3 4 5 @H_502_54@.bg{ @H_502_54@height: 50px; @H_502_54@wIDth: 50px; @H_502_54@background: url( "./img/confirm.png" @H_502_54@) @H_502_54@}

　　npm run build 打包

　　报错　　这是因为缺少loader，安装file-loader和url-loader 　　npm install file-loader url-loader --save-dev 　　配置：

1 2 3 4 5 6 7 8 9 10 // 图片 loader @H_502_54@{ @H_502_54@test: /\.(png|jpg|gif|jpeg)/, @H_502_54@use: [{ @H_502_54@loader: ‘url-loader‘ @H_502_54@, @H_502_54@options: { @H_502_54@limit: 500 //是把小于500B的文件打成Base64的格式，写入Js @H_502_54@} @H_502_54@}] @H_502_54@}

　　npm run build 打包，成功　　npm run serve 看下

　　有了　　这里配置的时候只引用了url-loader，这是因为，url-loader封装了file-loader 　　url-loader工作分两种情况：　　　　1.文件大小小于limit参数，url-loader将会把文件转为DataURL（Base64格式）；　　　　2.文件大小大于limit，url-loader会调用file-loader进行处理，参数也会直接传给file-loader。　　也就是说，其实我们只安装一个url-loader就可以了。但是为了以后的 *** 作方便，所以顺便安装上file-loader。 13、HTML中通过img引入图片　　这时候CSS中引入图片没问题，但是在HTML文件中通过img引入图片，会有问题，打包虽然没有报错，但是页面上并没有显示图片，控制台能看到报错

　　这是因为打包后路径的问题。　　使用HTML-withimg-loader来处理HTML引入的img图片　　安装：　　　　npm install HTML-withimg-loader --save-dev 　　配置　　　　url-loader中添加

1 2 3 4 @H_502_54@options: { @H_502_54@limit: 500, //是把小于500B的文件打成Base64的格式，写入Js @H_502_54@outputPath: ‘images/‘ //打包后的图片放到images文件夹下 @H_502_54@}

在module中添加

1 2 3 4 @H_502_54@{ @H_502_54@test: /\.(htm|HTML)$/i, @H_502_54@use: [ "HTML-withimg-loader" @H_502_54@] @H_502_54@}

　　然后npm run build，成功，但是dist文件夹中并没有生成images文件夹，这是因为设置了limit，如果引用的图片小于500k，url-loader将图片转换成base64格式写入Js，引入一张大的试试，再打包

　　可以看到区别，1.jpg由于超过400k，所以就被打包到了dist/images中了 14、使用less 　　安装less：　　　　npm install less --save-dev 　　打包需要less-loader，再安装less-loader：　　　　npm install less-loader --save-dev 　　配置：

1 2 3 4 5 // less loader @H_502_54@{ @H_502_54@test: /\.less$/, @H_502_54@use: [ "style-loader" @H_502_54@, "css-loader" @H_502_54@, "less-loader" @H_502_54@] @H_502_54@}

　　在src文件夹下创建indexless.less文件

1 2 3 4 5 6 @H_502_54@@bgcolor: #FFA54F; @H_502_54@.my{ @H_502_54@height: 100px; @H_502_54@wIDth: 100px; @H_502_54@ @H_502_54@}

　　对应的在index.HTML中添加class为my的div块　　npm run serve，浏览器中就能看到了

15、分离出来less文件，像分离CSS文件一样　　其实和分离CSS文件配置基本是一样的

1 2 3 4 5 6 7 8 9 10 // less loader @H_502_54@{ @H_502_54@test: /\.less$/, @H_502_54@use: ExtractTextPlugin.extract({ @H_502_54@fallback: "style-loader" @H_502_54@, @H_502_54@use: [ "css-loader" @H_502_54@, "less-loader" @H_502_54@] @H_502_54@}), @H_502_54@}

　　这时候运行npm run build 打包　　看dist文件夹下生成的index.CSS文件

　　已经生成 16、使用sass，配置大致相同 17、自动添加CSS3属性前缀　　安装插件：　　　　npm install postcss-loader autoprefixer --save-dev 　　在根目录下创建postCSS.config.Js文件

1 2 3 4 5 @H_502_54@module.exports = { @H_502_54@plugins: [ @H_502_54@require( ‘autoprefixer‘ @H_502_54@) //自动添加前缀插件 @H_502_54@] @H_502_54@}

webpack.config.Js配置

1 2 3 4 5 6 7 8 9 // CSS loader @H_502_54@{ @H_502_54@test: /\.CSS$/, @H_502_54@use: ExtractTextPlugin.extract({ @H_502_54@fallback: "style-loader" @H_502_54@, @H_502_54@use: [ "css-loader" @H_502_54@, "postcss-loader" @H_502_54@] @H_502_54@}) @H_502_54@},